<body onload="loadStat()">
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/js/highcharts.js"></script>

<script>

var allMyLife = 100 * 365 * 24 * 3600;

function loadStat ()
{
	var urlArray = [];
	var durArray = [];
	var urlPortion = [];		//在每个url上花费的时间占你一生的时间（100年）的百分比
	var totalDuration = 0;		//监控的所有url的总时间
	var urls = localStorage['urlList'].split(",");
//	var statList = $("#statList");
//	statList.empty();
	for (var i = 0; i < urls.length; i ++)
	{
		if ( urls[i] == "" )
			continue;
		var duration = localStorage[urls[i]+".duration"];
		if ( duration == undefined )
			continue;
		alert(duration);
//		statList.append("<li>" + urls[i] + " " + duration + "</li>");
		urlArray.push(urls[i]);
		durArray.push(Number(duration));
		urlPortion.push([urls[i], Number(duration) / allMyLife * 100]);
		totalDuration += Number(duration);
	}
//	urlPortion.push(["other", (1 - totalDuration / allMyLife) * 100]);
//	alert(urlPortion);
	var barChart = new Highcharts.Chart({
		chart: {
			renderTo: 'barChartContainer',
			defaultSeriesType: 'bar'
		},
		title: {
			text: '网站浏览时间统计'
		},
		xAxis: {
			categories: ,
			title: {
				text: null
			}
		},
		yAxis: {
			min: 0,
			title: {
				text: '时间',
				align: 'high'
			}
		},
		tooltip: {
			formatter: function() {
				return "你已浏览了" + formatTime(this.y);
			}
		},
		legend: {
			layout: 'vertical',
			align: 'right',
			verticalAlign: 'top',
			x: -100,
			y: 100,
			floating: true,
			borderWidth: 1,
			backgroundColor: '#FFFFFF',
			shadow: true
		},
		series: [{
			name: "已浏览时间",
			data: durArray
		}]
	});

chart = new Highcharts.Chart({
					chart: {
						renderTo: 'pieChartContainer',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					title: {
						text: '你花在这些网站上的时间占你一生（假设100年）的百分比'
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ formatTime(this.y * allMyLife / 100);
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
								}
							}
						}
					},
				    series: [{
						type: 'pie',
						name: 'Browser share',
						data: urlPortion 
					}]
				});
}

function formatTime(sec)
{
	var retStr = "";
	var min = 60;
	var hour = 3600;
	var day = 24 * 3600;
	var tmp;
	if ( sec >= day )
	{
		tmp = Math.floor(sec/day)
		retStr += tmp + "天";
		sec -= tmp * day;
	}
	if ( sec >= hour )
	{
		tmp = Math.floor(sec/hour);
		retStr += tmp + "小时";
		sec -= tmp * hour;
	}
	if ( sec >= min )
	{
		tmp = Math.floor(sec/min);
		retStr += tmp + "分钟";
		sec -= tmp * min;
	}
	retStr += sec + "秒";
	return retStr;
}
</script>

<html>
	<div id="pieChartContainer" style="width: 800px; height: 400px; margin: 0 auto"></div>
	<hr/>
	<div id="barChartContainer" style="width: 800px; height: 400px; margin: 0 auto"></div>
</html>
</body>
